<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业级界面布局</title>
    <style>
        :root{
            --normal-border-color:#ccc;
            --visited-border-color:white;
            --hover-border-color:red;
        }
        html,body{
            font-size:12px;
            height: 100%;
            margin:0;
        }
        main{
            height:100%;
            display: grid;
            grid-template-columns: 300px auto 200px;
            grid-template-rows: 100px auto 40px;
            grid-template-areas: "head head head"
                                 "left main right"
                                 "foot foot foot";
        }
        .icon{
            width:25px;
            height:25px;
            vertical-align: -15px;
            margin:0  5px 0 10px;
        }
        .add{
            width:25px;
            height: 25px;
            background:url(../images/icons/add.png) no-repeat 0 0/25px 25px;
            margin-right:5px;
            margin-top:10px;
        }
        .reduce{
            width:25px;
            height: 25px;
            background:url(../images/icons/cut.png) no-repeat 0 0/25px 25px;
            margin-right:5px;
            margin-top:10px;           
        }
        .top{
            border-bottom:1px solid var(--normal-border-color);
            grid-area: head;
        }
        .left{
            grid-area:left;
        }
        .menu-level1,.menu-level2{
            list-style-type: none;
            padding-left: 0;
            margin:0;
            user-select: none;
        }
        .li1,.li2{
            user-select: none;
            width:99%;
            height:40px;
            border-right: 3px solid var(--visited-border-color);
            font-size:1.4rem;
            border-bottom:1px solid  var(--normal-border-color);
        }
        .li1>span,.li2>span{
            line-height: 40px;
            vertical-align: -10px;
        }
        .li1>span{
            font-weight: bold;
        }
        .li2>span{
            font-size:1.2rem;
            padding-left:30px;
        }
        .li1:hover,.li2:hover{
            border-right: 4px solid var(--hover-border-color);
            background-color:ivory;
            cursor: pointer;
        }
        .main{
            grid-area:main;
            margin:5px 0;
        }
        .aside{
            grid-area:right;
        }
        .bottom{
            border:1px solid  var(--normal-border-color);
            grid-area:foot;
        }
        iframe{
            border:0;
            width:100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <main>
        <header class="top">logo</header>
        <nav class="left">
            <ul class="menu-level1">
                <li class="li1">
                    <img class="icon" src="../images/icons/java.png" alt="" srcset="">
                    <span>Java</span>
                    <div class="right-icon add" style="float:right"></div>
                </li>
                <ol class="menu-level2" hidden>
                    <a href="article_list.html" target="main_page"><li class="li2"><span>Java Core</span></li></a>
                    <li class="li2"><span>Java Web</span></li>
                    <li class="li2"><span>Java GUI</span></li>
                </ol>
                <li class="li1">
                    <img class="icon" src="../images/icons/frontend.png" alt="" srcset="">
                    <span>前端</span>
                    <div class="right-icon add" style="float:right"></div>
                </li>
                <ol class="menu-level2" hidden>
                    <a href="../demo_es/window_demo.html"><li class="li2"><span>HTML</span></li></a>
                    <li class="li2"><span>CSS</span></li>
                    <li class="li2"><span>JavaScript</span></li>
                </ol>
                <li class="li1">
                    <img class="icon" src="../images/icons/bigdata.png" alt="" srcset="">
                    <span>大数据</span>
                    <div class="right-icon add" style="float:right"></div>
                </li>
                <li class="li1">
                    <img class="icon" src="../images/icons/ai.png" alt="" srcset="">
                    <span>人工智能</span>
                    <div class="right-icon add" style="float:right"></div>
                </li>
            </ul>
        </nav>
        <article class="main">
            <iframe name="main_page" src="welcome.html"></iframe>
        </article>
        <aside class="aside">login</aside>
        <footer class="bottom">copy</footer>
    </main>
</body>
</html>
<script>
    document.querySelector('.menu-level1').addEventListener('click',evnet=>{
        if(event.target.className=="li1"){
            //单击事件发生后，的事件处理程序
            let node=event.target.nextElementSibling;   //找到当前节的下一个兄弟节点
            if(null!=node && node.className=='menu-level2'){
                node.hidden=!node.hidden;   //反向操作，如果原来为真，则为假；原来假，则为真
                let div=event.target.querySelector(".right-icon");  //获取li中的class属性中包含有right-icon类名的标签
                //如果class列表中包含add类，则换成reduce类；否则相反
                if(div.classList.contains("add")){
                    div.classList.replace("add","reduce");  //用reduce类替换add类
                }else{
                    div.classList.replace("reduce","add");                
                }
            }
        }
    },false);
</script>